<template>
	<view class="view-root">
		<view class="flex-v view-title">
			{{$t("thickShow.wildAccount.changeInfo")}}
		</view>
		<view style="height: 1px; background-color: #E8E8E8;"></view>
		
		<view class="view-content flex-v">
			<view class="content-dept flex-v">
				<view class="dept-line flex-h">
					<view class="dept-key">{{$t("thickShow.wildAccount.wildType")}}</view>
					<view class="dept-value">{{inWildTypeName}}</view>
				</view>
				
				<view class="dept-line flex-h">
					<view class="dept-key"></view>
					<input class="dept-input" v-model="typeNameStr"></input>
				</view>
			</view>
						
			<view class="content-dept flex-v">
				<view class="dept-line flex-h">
					<view class="dept-key">{{$t("thickShow.wildAccount.wildType")}}</view>
					<view class="dept-value">{{inContent}}</view>
				</view>
				
				<view class="dept-line flex-h">
					<view class="dept-key"></view>
					<input class="dept-input" v-model="contentStr"></input>
				</view>
				
			</view>
		</view>
		
		<view class="flex-h view-footer">
			<view class="btn" @click="onCancelClick">{{$t("public.cancel")}}</view>
			<view class="btn" style="color: #1890FF; margin-left: 1upx;" @click="onConfirmClick">{{$t("public.confirm")}}</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props:{
			inWildTypeName: {
				type: String,
				default: 'fsdafdsa'
			} ,
			
			inContent: {
				type: String,
				default: 'fsdafsdafsad'
			},
		},
		
		data() {
			return {
				typeNameStr: '',
				contentStr: ''
			}
		},
		
		mounted() {
			this.typeNameStr = this.inWildTypeName;
			this.contentStr = this.inContent;
		},
		
		methods:{
			onConfirmClick() {
				if(this.typeNameStr != this.inWildTypeName || this.contentStr != this.inContent ) {
					this.$emit("onConfirmClick" , this.typeNameStr , this.contentStr );
				} else {
					this.$emit("onCloseClick");
				}
			},
			
			onCancelClick() {
				this.$emit("onCloseClick");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view-root {
		width: 50vw;
		height: 300rpx;
		background-color: #FFFFFF;
		border-radius: 10px;
		align-items: center;
	}
	
	.view-title {
		width: 100%;
		text-align: center;
		font-size: 18px;
		padding: 10px;
	}
	
	.view-content {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		align-items: center;
		
		.content-dept {
			width: 100%;
			align-items: center;
			.dept-line {
				width: 100%;
				padding: 5px 0px;
				align-items: center;
				
				.dept-key {
					width: 20%;
				}
				
				.dept-value {
					width: 80%;
				}
				
				.dept-input {
					width: 80%;
					border: 1px solid #E8E8E8;
					padding: 3px;
				}
			}
		}
	}
	
	.view-footer {
		position: absolute;
		bottom: 0px;
		width: 100%;
		.btn {
			width: 50%;
			height: 100%;
			background-color: #fff;
			color: #000;
			padding: 10upx;
			text-align: center;
			
			border: 1px solid #E8E8E8;
		}
		
	}
</style>
